<template>
  <div class="navbar">
    <div class="left-side">
      <a-space>
        <img
          alt="logo"
          style="width: 50px"
          :src="userStore?.pageInfo?.web_logo"
        />
        <a-typography-title
          v-if="appStore.device === 'desktop'"
          :style="{ margin: 0, fontSize: '18px' }"
          :heading="5"
          class="titles"
        >
          <span class="titles-title">{{ userStore?.pageInfo?.web_name }}</span>
          <span class="titles-pname">{{ userStore?.pageInfo?.web_slog }}</span>
        </a-typography-title>
        <icon-menu-fold
          v-if="!topMenu && appStore.device === 'mobile'"
          style="font-size: 22px; cursor: pointer"
          @click="toggleDrawerMenu"
        />
        <div class="slogon">
          <span>服务有远见的尖端企业</span>
          <span class="fslos">全国档案管理服务平台</span>
        </div>
      </a-space>
    </div>
    <div class="center-side">
      <Menu v-if="topMenu" />
    </div>
    <ul class="right-side">
      <li>
        <a-tooltip content="文档搜索">
          <a-button class="nav-btn" type="outline" :shape="'circle'">
            <template #icon>
              <icon-search />
            </template>
          </a-button>
        </a-tooltip>
      </li>
      <!--   AI   -->
      <!--      <li>-->
      <!--        <a-tooltip content="政策AI">-->
      <!--          <a-button-->
      <!--            class="nav-btn"-->
      <!--            type="outline"-->
      <!--            :shape="'circle'"-->
      <!--            @click="setDropDownVisible"-->
      <!--          >-->
      <!--            <template #icon>-->
      <!--              <svg-icon style="height: 20px" class="icon" name="AI" />-->
      <!--            </template>-->
      <!--          </a-button>-->
      <!--        </a-tooltip>-->
      <!--      </li>-->
      <li>
        <a-tooltip :content="theme === 'light' ? '黑色' : '白色'">
          <a-button
            class="nav-btn"
            type="outline"
            :shape="'circle'"
            @click="handleToggleTheme"
          >
            <template #icon>
              <icon-moon-fill v-if="theme === 'dark'" />
              <icon-sun-fill v-else />
            </template>
          </a-button>
        </a-tooltip>
      </li>
      <li>
        <a-popover trigger="click" style="width: 400px">
          <div class="message-box-trigger">
            <a-badge :count="appStore.messageCount || 0">
              <a-button
                class="nav-btn"
                type="outline"
                :shape="'circle'"
                @click="setPopoverVisible"
              >
                <icon-notification />
              </a-button>
            </a-badge>
          </div>
          <template #content>
            <div class="headerMessage" style="position: relative">
              <a-tabs
                v-model:activeKey="messageType"
                type="rounded"
                style="width: 100%; margin-bottom: -20px"
                @change="getMessageList"
              >
                <a-tab-pane :key="1" title="系统消息" />
                <a-tab-pane :key="2" title="个人消息" />
              </a-tabs>
              <div
                style="
                  position: absolute;
                  right: 0px;
                  top: 50%;
                  transform: translate(-20%, -85%);
                "
                @click="allRead"
                ><a-link :hoverable="false">全部已读</a-link></div
              >
              <a-divider />
            </div>
            <a-list
              style="width: 100%; margin-top: -10px"
              :bordered="false"
              :split="false"
              :loading="loading"
            >
              <template #empty>
                <div
                  data-v-84c40e46=""
                  style="margin-top: -30px"
                  class="arco-result"
                  ><div class="arco-result-icon arco-result-icon-404"
                    ><div class="arco-result-icon-tip"
                      ><svg
                        width="100%"
                        height="100%"
                        viewBox="0 0 213 213"
                        style="
                          fill-rule: evenodd;
                          clip-rule: evenodd;
                          stroke-linejoin: round;
                          stroke-miterlimit: 2;
                        "
                      >
                        <g transform="matrix(1,0,0,1,-1241.95,-445.62)">
                          <g>
                            <g transform="matrix(1,0,0,1,295.2,-87.3801)">
                              <circle
                                cx="1053.23"
                                cy="639.477"
                                r="106.477"
                                style="fill: rgb(235, 238, 246)"
                              ></circle>
                            </g>
                            <g
                              transform="matrix(0.38223,0,0,0.38223,1126.12,238.549)"
                            >
                              <g
                                transform="matrix(0.566536,0.327089,-1.28774,0.74348,763.4,317.171)"
                              >
                                <rect
                                  x="657.012"
                                  y="404.643"
                                  width="198.586"
                                  height="145.08"
                                  style="fill-opacity: 0.1"
                                ></rect>
                              </g>
                              <g
                                transform="matrix(0.29595,0.170867,-0.91077,0.525833,873.797,588.624)"
                              >
                                <rect
                                  x="657.012"
                                  y="404.643"
                                  width="198.586"
                                  height="145.08"
                                  style="fill-opacity: 0.1"
                                ></rect>
                              </g>
                              <g transform="matrix(1,0,0,1,275,-15)">
                                <path
                                  d="M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z"
                                  style="fill: rgb(196, 173, 142)"
                                ></path>
                                <g
                                  transform="matrix(0.866025,-0.5,1,0.57735,0,-45)"
                                >
                                  <ellipse
                                    cx="-848.416"
                                    cy="1004.25"
                                    rx="6.062"
                                    ry="5.25"
                                    style="fill: rgb(255, 125, 0)"
                                  ></ellipse>
                                </g>
                              </g>
                              <g transform="matrix(1,0,0,1,183.952,-67.5665)">
                                <path
                                  d="M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z"
                                  style="fill: rgb(196, 173, 142)"
                                ></path>
                                <g
                                  transform="matrix(0.866025,-0.5,1,0.57735,0,-45)"
                                >
                                  <ellipse
                                    cx="-848.416"
                                    cy="1004.25"
                                    rx="6.062"
                                    ry="5.25"
                                    style="fill: rgb(255, 125, 0)"
                                  ></ellipse>
                                </g>
                              </g>
                              <g transform="matrix(1,0,0,1,414,-95.2517)">
                                <path
                                  d="M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z"
                                  style="fill: rgb(196, 173, 142)"
                                ></path>
                                <g
                                  transform="matrix(0.866025,-0.5,1,0.57735,0,-45)"
                                >
                                  <ellipse
                                    cx="-848.416"
                                    cy="1004.25"
                                    rx="6.062"
                                    ry="5.25"
                                    style="fill: rgb(255, 125, 0)"
                                  ></ellipse>
                                </g>
                              </g>
                              <g transform="matrix(1,0,0,1,322.952,-147.818)">
                                <path
                                  d="M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z"
                                  style="fill: rgb(196, 173, 142)"
                                ></path>
                                <g
                                  transform="matrix(0.866025,-0.5,1,0.57735,0,-45)"
                                >
                                  <ellipse
                                    cx="-848.416"
                                    cy="1004.25"
                                    rx="6.062"
                                    ry="5.25"
                                    style="fill: rgb(255, 125, 0)"
                                  ></ellipse>
                                </g>
                              </g>
                              <g>
                                <g
                                  transform="matrix(1.42334,-0.821763,1.11271,0.642426,-1439.64,459.621)"
                                >
                                  <rect
                                    x="495.52"
                                    y="1057.87"
                                    width="105.078"
                                    height="91"
                                    style="fill: rgb(253, 243, 228)"
                                  ></rect>
                                </g>
                                <g
                                  transform="matrix(1.40786,-0.812831,6.60237e-16,1.99081,-2052.17,-84.7286)"
                                >
                                  <rect
                                    x="1844.06"
                                    y="1192.54"
                                    width="106.232"
                                    height="92"
                                    style="fill: rgb(196, 173, 142)"
                                  ></rect>
                                </g>
                                <g
                                  transform="matrix(1.26159,-0.728382,5.91642e-16,1.78397,-1774.67,11.2303)"
                                >
                                  <path
                                    d="M1950.29,1194.38C1950.29,1193.37 1949.41,1192.54 1948.34,1192.54L1846.01,1192.54C1844.93,1192.54 1844.06,1193.37 1844.06,1194.38L1844.06,1282.7C1844.06,1283.72 1844.93,1284.54 1846.01,1284.54L1948.34,1284.54C1949.41,1284.54 1950.29,1283.72 1950.29,1282.7L1950.29,1194.38Z"
                                    style="fill: rgb(132, 97, 51)"
                                  ></path>
                                </g>
                                <g
                                  transform="matrix(1.2198,-0.704254,5.72043e-16,1.72488,-1697.6,37.2103)"
                                >
                                  <path
                                    d="M1950.29,1194.38C1950.29,1193.37 1949.41,1192.54 1948.34,1192.54L1846.01,1192.54C1844.93,1192.54 1844.06,1193.37 1844.06,1194.38L1844.06,1282.7C1844.06,1283.72 1844.93,1284.54 1846.01,1284.54L1948.34,1284.54C1949.41,1284.54 1950.29,1283.72 1950.29,1282.7L1950.29,1194.38Z"
                                    style="fill: rgb(196, 173, 142)"
                                  ></path>
                                </g>
                                <g
                                  transform="matrix(0.707187,0.408295,9.06119e-17,1.54833,-733.949,683.612)"
                                >
                                  <rect
                                    x="1663.92"
                                    y="-407.511"
                                    width="143.183"
                                    height="118.292"
                                    style="fill: rgb(240, 218, 183)"
                                  ></rect>
                                </g>
                                <g
                                  transform="matrix(1.64553,-0.950049,1.17482,0.678285,-1632.45,473.879)"
                                >
                                  <rect
                                    x="495.52"
                                    y="1057.87"
                                    width="105.078"
                                    height="91"
                                    style="fill: rgb(253, 243, 228)"
                                  ></rect>
                                </g>
                                <g
                                  transform="matrix(0.74666,0.431085,2.3583e-17,0.135259,-816.63,57.1397)"
                                >
                                  <rect
                                    x="1663.92"
                                    y="-407.511"
                                    width="143.183"
                                    height="118.292"
                                    style="fill: rgb(240, 218, 183)"
                                  ></rect>
                                </g>
                                <g
                                  transform="matrix(1.64553,-0.950049,1.17482,0.678285,-1632.45,473.879)"
                                >
                                  <rect
                                    x="495.52"
                                    y="1057.87"
                                    width="105.078"
                                    height="91"
                                    style="fill: rgb(253, 243, 228)"
                                  ></rect>
                                </g>
                                <g
                                  transform="matrix(0.750082,0,0,0.750082,163.491,354.191)"
                                >
                                  <g
                                    transform="matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)"
                                  >
                                    <rect
                                      x="1844.06"
                                      y="1192.54"
                                      width="106.232"
                                      height="92"
                                      style="fill: rgb(196, 173, 142)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)"
                                  >
                                    <path
                                      d="M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                      style="fill: rgb(132, 97, 51)"
                                    ></path>
                                  </g>
                                  <g
                                    transform="matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)"
                                  >
                                    <path
                                      d="M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                      style="fill: rgb(246, 220, 185)"
                                    ></path>
                                  </g>
                                  <g
                                    transform="matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)"
                                  >
                                    <rect
                                      x="495.52"
                                      y="1057.87"
                                      width="105.078"
                                      height="91"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)"
                                  >
                                    <rect
                                      x="1663.92"
                                      y="-407.511"
                                      width="143.183"
                                      height="118.292"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                </g>
                                <g
                                  transform="matrix(0.750082,0,0,0.750082,163.491,309.191)"
                                >
                                  <g
                                    transform="matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)"
                                  >
                                    <rect
                                      x="1844.06"
                                      y="1192.54"
                                      width="106.232"
                                      height="92"
                                      style="fill: rgb(196, 173, 142)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)"
                                  >
                                    <path
                                      d="M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                      style="fill: rgb(132, 97, 51)"
                                    ></path>
                                  </g>
                                  <g
                                    transform="matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)"
                                  >
                                    <path
                                      d="M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                      style="fill: rgb(246, 220, 185)"
                                    ></path>
                                  </g>
                                  <g
                                    transform="matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)"
                                  >
                                    <rect
                                      x="495.52"
                                      y="1057.87"
                                      width="105.078"
                                      height="91"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)"
                                  >
                                    <rect
                                      x="1663.92"
                                      y="-407.511"
                                      width="143.183"
                                      height="118.292"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                </g>
                                <g
                                  transform="matrix(0.750082,0,0,0.750082,163.491,263.931)"
                                >
                                  <g
                                    transform="matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)"
                                  >
                                    <rect
                                      x="1844.06"
                                      y="1192.54"
                                      width="106.232"
                                      height="92"
                                      style="fill: rgb(196, 173, 142)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)"
                                  >
                                    <path
                                      d="M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                      style="fill: rgb(132, 97, 51)"
                                    ></path>
                                  </g>
                                  <g
                                    transform="matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)"
                                  >
                                    <path
                                      d="M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                      style="fill: rgb(246, 220, 185)"
                                    ></path>
                                  </g>
                                  <g
                                    transform="matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)"
                                  >
                                    <rect
                                      x="495.52"
                                      y="1057.87"
                                      width="105.078"
                                      height="91"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)"
                                  >
                                    <rect
                                      x="1663.92"
                                      y="-407.511"
                                      width="143.183"
                                      height="118.292"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                </g>
                                <path
                                  d="M555.753,832.474L555.753,921.408L630.693,878.141L630.693,789.207L555.753,832.474Z"
                                  style="fill-opacity: 0.1"
                                ></path>
                                <g
                                  transform="matrix(0.750082,0,0,0.750082,236.431,272.852)"
                                >
                                  <g
                                    transform="matrix(1.64553,-0.950049,1.14552,0.661368,-1606.78,467.933)"
                                  >
                                    <rect
                                      x="495.52"
                                      y="1057.87"
                                      width="105.078"
                                      height="91"
                                      style="fill: rgb(253, 243, 228)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(1.54477,-0.891873,1.05847,0.611108,-1456.84,490.734)"
                                  >
                                    <rect
                                      x="495.52"
                                      y="1057.87"
                                      width="105.078"
                                      height="91"
                                      style="fill: rgb(132, 97, 51)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(1.27607,-0.736739,0.751435,0.433841,-970.952,617.519)"
                                  >
                                    <rect
                                      x="495.52"
                                      y="1057.87"
                                      width="105.078"
                                      height="91"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(1.62765,-0.939723,1.42156e-16,0.5,-2476.81,1893.62)"
                                  >
                                    <rect
                                      x="1844.06"
                                      y="1192.54"
                                      width="106.232"
                                      height="92"
                                      style="fill: rgb(196, 173, 142)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(1.62765,-0.939723,1.42156e-16,0.5,-2476.81,1893.62)"
                                  >
                                    <rect
                                      x="1844.06"
                                      y="1192.54"
                                      width="106.232"
                                      height="92"
                                      style="fill: rgb(196, 173, 142)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(0.728038,0.420333,3.52595e-17,0.377589,-790.978,151.274)"
                                  >
                                    <rect
                                      x="1663.92"
                                      y="-407.511"
                                      width="143.183"
                                      height="118.292"
                                      style="fill: rgb(240, 218, 183)"
                                    ></rect>
                                  </g>
                                  <g
                                    transform="matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2726.83,1873.38)"
                                  >
                                    <rect
                                      x="1844.06"
                                      y="1192.54"
                                      width="106.232"
                                      height="92"
                                      style="fill: rgb(196, 173, 142)"
                                    ></rect>
                                  </g>
                                  <g>
                                    <g
                                      transform="matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)"
                                    >
                                      <rect
                                        x="1844.06"
                                        y="1192.54"
                                        width="106.232"
                                        height="92"
                                        style="fill: rgb(196, 173, 142)"
                                      ></rect>
                                    </g>
                                    <g
                                      transform="matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)"
                                    >
                                      <path
                                        d="M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                        style="fill: rgb(132, 97, 51)"
                                      ></path>
                                    </g>
                                    <g
                                      transform="matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)"
                                    >
                                      <path
                                        d="M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z"
                                        style="fill: rgb(246, 220, 185)"
                                      ></path>
                                    </g>
                                    <g
                                      transform="matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)"
                                    >
                                      <rect
                                        x="495.52"
                                        y="1057.87"
                                        width="105.078"
                                        height="91"
                                        style="fill: rgb(240, 218, 183)"
                                      ></rect>
                                    </g>
                                    <g
                                      transform="matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)"
                                    >
                                      <rect
                                        x="1663.92"
                                        y="-407.511"
                                        width="143.183"
                                        height="118.292"
                                        style="fill: rgb(240, 218, 183)"
                                      ></rect>
                                    </g>
                                  </g>
                                </g>
                                <g
                                  transform="matrix(1.62765,-0.939723,4.80984e-17,0.173913,-2468.81,2307.87)"
                                >
                                  <rect
                                    x="1844.06"
                                    y="1192.54"
                                    width="106.232"
                                    height="92"
                                    style="fill: rgb(196, 173, 142)"
                                  ></rect>
                                </g>
                              </g>
                              <g>
                                <g
                                  transform="matrix(0.479077,0.276595,-0.564376,0.325843,598.357,-129.986)"
                                >
                                  <path
                                    d="M1776.14,1326C1776.14,1321.19 1772.15,1317.28 1767.24,1317.28L1684.37,1317.28C1679.46,1317.28 1675.47,1321.19 1675.47,1326L1675.47,1395.75C1675.47,1400.56 1679.46,1404.46 1684.37,1404.46L1767.24,1404.46C1772.15,1404.46 1776.14,1400.56 1776.14,1395.75L1776.14,1326Z"
                                    style="fill: white"
                                  ></path>
                                </g>
                                <g
                                  transform="matrix(2.61622,0,0,2.61622,-2305.73,162.161)"
                                >
                                  <g
                                    transform="matrix(1.09915,-0.634597,1.26919,0.73277,-299.167,-62.4615)"
                                  >
                                    <ellipse
                                      cx="412.719"
                                      cy="770.575"
                                      rx="6.303"
                                      ry="5.459"
                                      style="fill: rgb(255, 125, 0)"
                                    ></ellipse>
                                  </g>
                                  <g
                                    transform="matrix(0.238212,-0.137532,0.178659,0.103149,875.064,207.93)"
                                  >
                                    <text
                                      x="413.474px"
                                      y="892.067px"
                                      style="
                                        font-family: NunitoSans-Bold,
                                          'Nunito Sans';
                                        font-weight: 700;
                                        font-size: 41.569px;
                                        fill: white;
                                      "
                                    >
                                      ?
                                    </text>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg></div
                    ></div
                  ><div class="arco-result-subtitle" style="color: #86909c"
                    >暂无内容</div
                  ></div
                ></template
              >
              <a-list-item
                v-for="(item, index) in messageList"
                :key="index"
                style="width: 100%; cursor: pointer; padding: 0px !important"
                @click="
                  () => {
                    router.push({
                      path: '/personsetting/messageList',
                    });
                  }
                "
              >
                <a-badge dot :count="setCount(item.msg_state)" :offset="[-10]">
                  <a-list-item
                    style="
                      display: flex;
                      flex-direction: column;
                      padding: 0px 20px;
                    "
                  >
                    <div class="espll">{{ item.msg_title }}</div>
                    <div class="espll" style="margin-top: 10px">{{
                      item.msg_content
                    }}</div>
                  </a-list-item>
                </a-badge>
                <a-divider style="width: 100%" />
              </a-list-item>
            </a-list>
          </template>
        </a-popover>

        <a-popover
          trigger="click"
          :arrow-style="{ display: 'none' }"
          :content-style="{ padding: 0, minWidth: '400px' }"
          content-class="message-popover"
        >
          <div ref="refBtn" class="ref-btn"></div>
          <template #content>
            <message-box />
          </template>
        </a-popover>
      </li>
      <li>
        <a-tooltip :content="isFullscreen ? '窗口' : '全局'">
          <a-button
            class="nav-btn"
            type="outline"
            :shape="'circle'"
            @click="toggleFullScreen"
          >
            <template #icon>
              <icon-fullscreen-exit v-if="isFullscreen" />
              <icon-fullscreen v-else />
            </template>
          </a-button>
        </a-tooltip>
      </li>
      <!--      <li>-->
      <!--        <a-tooltip content="设置">-->
      <!--          <a-button-->
      <!--            class="nav-btn"-->
      <!--            type="outline"-->
      <!--            :shape="'circle'"-->
      <!--            @click="setVisible"-->
      <!--          >-->
      <!--            <template #icon>-->
      <!--              <icon-settings />-->
      <!--            </template>-->
      <!--          </a-button>-->
      <!--        </a-tooltip>-->
      <!--      </li>-->
      <li>
        <a-dropdown trigger="click">
          <a-avatar
            :size="32"
            :style="{
              marginRight: '8px',
              cursor: 'pointer',
              backgroundColor: '#3370ff',
            }"
          >
            <img v-if="avatar" alt="avatar" :src="avatar" />
            <span>{{ userStore.user_name }}</span>
          </a-avatar>
          <template #content>
            <a-doption>
              <a-space
                @click="
                  () => {
                    $router.push({ path: '/personsetting/personalinfo' });
                  }
                "
              >
                <icon-user />
                <span> 个人资料 </span>
              </a-space>
            </a-doption>
            <a-doption>
              <a-space @click="handleLogout">
                <icon-export />
                <span> 退出登录 </span>
              </a-space>
            </a-doption>
          </template>
        </a-dropdown>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, inject } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { useDark, useToggle, useFullscreen } from '@vueuse/core';
  import { useAppStore, useUserStore } from '@/store';
  import useUser from '@/hooks/user';
  import Menu from '@/components/menu/index.vue';
  import MessageBox from '../message-box/index.vue';
  import { getMsgCount, getuserdetail, getusermsglist } from '@/api/syssetting';
  import useLoading from '@/hooks/loading';
  import router from '@/router';
  const { loading, setLoading } = useLoading(false);
  const appStore = useAppStore();
  const userStore = useUserStore();
  const { logout } = useUser();
  const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
  const avatar = computed(() => {
    if (userStore.user_avatar) {
      return import.meta.env.VITE_FILE_PATH + userStore.user_avatar;
    } else {
      return false;
    }
  });
  const messageType = ref(1);
  const num = ref(0);
  // 定义轮询定时器
  let pollingTimer: NodeJS.Timeout | null = null;
  onMounted(() => {
    // 立即执行一次获取
    fetchMsgCount();
    // 启动5秒轮询（5000毫秒）
    pollingTimer = setInterval(fetchMsgCount, 10000);
  });
  const setCount = (e: any) => {
    return Number(e) === 1 ? 1 : 0;
  };
  // 封装获取未读消息的方法
  const fetchMsgCount = () => {
    appStore.getMessageCount();
  };
  onUnmounted(() => {
    // 组件卸载时清除定时器
    if (pollingTimer) {
      clearInterval(pollingTimer);
      pollingTimer = null;
    }
  });
  const theme = computed(() => {
    return appStore.theme;
  });
  const allRead = async () => {
    try {
      setLoading(true);
      // 生成请求Promise数组
      const requestPromises = messageList.value.map((item) =>
        getuserdetail({ msg_id: item.msg_id })
          .then((res) => {
            // 可在此处处理单个请求的响应数据
            return res; // 保留响应结果
          })
          .catch((err) => {
            return Promise.reject(err); // 保持Promise.reject链式传递
          })
      );

      // 等待所有请求完成
      await Promise.all(requestPromises);
      // 所有请求完成后刷新列表且刷新全局消息
      getMessageList();
      appStore.getMessageCount();
      Message.success('全部标记为已读！');
    } catch (error) {
      // 处理部分失败的情况
      Message.error('部分消息标记失败，请重试');
    }
  };

  const topMenu = computed(() => appStore.topMenu && appStore.menu);
  const isDark = useDark({
    selector: 'body',
    attribute: 'arco-theme',
    valueDark: 'dark',
    valueLight: 'light',
    storageKey: 'arco-theme',
    onChanged(dark: boolean) {
      // overridden default behavior
      appStore.toggleTheme(dark);
    },
  });
  const toggleTheme = useToggle(isDark);
  const handleToggleTheme = () => {
    toggleTheme();
  };
  const setVisible = () => {
    appStore.updateSettings({ globalSettings: true });
  };
  const refBtn = ref();
  const triggerBtn = ref();
  // 消息列表
  const messageList = ref([]);
  const getMessageList = () => {
    getusermsglist({
      msg_type: messageType.value,
    })
      .then((res) => {
        messageList.value = res.data.list.slice(0, 10);
      })
      .finally(() => {
        setLoading(false);
      });
  };
  const setPopoverVisible = () => {
    setLoading(true);
    // 每次启动获取消息列表
    getMessageList();
    const event = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true,
    });
    refBtn.value.dispatchEvent(event);
  };
  const handleLogout = () => {
    logout();
  };
  const setDropDownVisible = () => {
    const event = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true,
    });
    triggerBtn.value.dispatchEvent(event);
  };
  const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
</script>

<style scoped lang="less">
  .espll {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 350px;
  }
  /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  @font-face {
    font-family: '阿里妈妈数黑体 Bold111';
    font-weight: 700;
    src: url('//at.alicdn.com/wf/webfont/rkXdjjGNlaVX/OyyBCUcoEtNQ.woff2')
        format('woff2'),
      url('//at.alicdn.com/wf/webfont/rkXdjjGNlaVX/pUJdpG1vEYdH.woff')
        format('woff');
    font-variation-settings: normal;
    font-display: swap;
  }

  @font-face {
    font-family: '阿里妈妈数黑体 Bold';
    font-weight: 700;
    src: url('//at.alicdn.com/wf/webfont/rkXdjjGNlaVX/hP1etPo9SxRo.woff2')
        format('woff2'),
      url('//at.alicdn.com/wf/webfont/rkXdjjGNlaVX/OMTkLnoO9AAu.woff')
        format('woff');
    font-display: swap;
  }

  .navbar {
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-color: var(--color-bg-2);
    border-bottom: 1px solid var(--color-border);
    font-family: '阿里妈妈数黑体 Bold';
    letter-spacing: 0.5px;
  }

  .left-side {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .titles {
    display: flex;
    flex-direction: column;
    &-title {
      font-weight: bold;
      font-family: '阿里妈妈数黑体 Bold111';
    }
    &-pname {
      font-size: 13px;
      font-style: italic;
    }
  }

  .center-side {
    flex: 1;
  }

  .right-side {
    display: flex;
    padding-right: 20px;
    list-style: none;
    :deep(.locale-select) {
      border-radius: 20px;
    }
    li {
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    a {
      color: var(--color-text-1);
      text-decoration: none;
    }
    .nav-btn {
      border-color: rgb(var(--gray-2));
      color: rgb(var(--gray-8));
      font-size: 16px;
    }
    .trigger-btn,
    .ref-btn {
      position: absolute;
      bottom: 14px;
    }
    .trigger-btn {
      margin-left: 14px;
    }
  }
</style>

<style lang="less">
  .message-popover {
    .arco-popover-content {
      margin-top: 0;
    }
  }
  .arco-popover-popup-content {
    padding: 10px 0px 0px 0px !important;
  }
  .slogon {
    margin-left: 5px;
    width: 138px;
    height: 35px;
    cursor: default;
    background-color: #e03333;
    font-size: 11px;
    color: #fff;
    line-height: 15px;
    -moz-text-align-last: justify;
    text-align-last: justify;
    padding: 0px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  .fslos {
    font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC',
      'Hiragino Sans GB', 'noto sans', 'Microsoft YaHei', 'Helvetica Neue',
      Helvetica, Arial, sans-serif;
  }
</style>
